require('./Selectbar.styl');
import { Boxs, Context } from 'saltui';
const { HBox, Box, VBox } = Boxs;
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';
const getPageSize = (() => {
    const width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

    const height = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

    const result = { width, height };

    return () => result;
})();
class Selectbar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectStr: props.selectStr,
            holding: null,

        };
    }
    hold(e) {
        const t = this;
        const clientX = getPageSize().width - 10;
        const { clientY } = e.touches[0];
        const target = document.elementFromPoint(clientX, clientY);
        const key = target && target.getAttribute('data-key');
        e.preventDefault();
        if (t.state.holding !== key) {
            t.setState({
                holding: key
            });
            this.props.onSelect(key);
        }
    }

    release() {
        const t = this;
        t.setState({
            holding: null,
        });
    }
    render() {
        let t = this;
        return (
            <VBox className="selectbar" vAlign="center">
                {this.state.selectStr.split("").map((item, index) => {
                    return (
                        <Box
                            onTouchStart={t.hold.bind(t)}
                            onTouchMove={t.hold.bind(t)}
                            onTouchEnd={t.release.bind(t)}
                            onTouchCancel={t.release.bind(t)}
                            className="t-MT3"
                            key={index}
                            data-key={item.toUpperCase()}>
                            {item.toUpperCase()}
                        </Box>)
                })}
            </VBox>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.selectStr != this.state.selectStr) {
            this.setState({ selectStr: nextProps.selectStr })
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Selectbar;
